<!DOCTYPE html>
<html lang="zh" style="height: 100%;">
  <meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <head>
    <!-- <script th:src="@{./vue.js}"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  </head>
  <style type="text/css">
    body {
		  margin: 0;
			padding: 0;
		}
    .home-page{
      width: 100%;
      height: 100%;
    }
    .page-top{
      height: 200px;
      background-color: #5E8EE2;
      line-height: 200px;
      padding: 0 130px;
    }
    .top-logo{
      height: 100px;
      vertical-align: middle;
      margin-right: 30px;
    }
    .top-title{
      font-size: 40px;
      color: #fff;
      font-weight: 400;
      font-family: SimHei;
    }
    .page-center{
      width: 100%;
      height: calc(100% - 301px)
    }
    .center-content{
      text-align: center;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .center-title{
      color: #4380EA;
      font-size: 24px;
      font-weight: 400;
      font-family: SimHei;
    }
    .center-nav{
      height: 4px;
      background: #5E8EE2;
      margin: 25px 0;
    }
    .center-bottom{
      width: 100%;
      display: flex;
      justify-content: center;
    }
    .img-title{
      margin-top: 25px;
      font-size: 20px;
      color: #4380EA;
      font-weight: 400;
      font-family: SimHei;
    }
    .bottom-content{
      width: 400px;
      cursor: pointer;
    }
    .page-bottom{
      width: 100%;
      height: 100px;
      line-height: 100px;
      text-align: center;
      background-color: #5E8EE2;
    }
    .bottom-title{
      color: #fff;
      font-family: Heiti SC;
      font-weight: 300;
    }
  </style>
  <body style="height: 100%;">
    <div id="app" class="home-page">
      <div class="page-top">
        <img src="./img/pageLogo.png" alt="" class="top-logo">
        <span class="top-title">云智医智慧医疗平台</span>
      </div>
      <div class="page-center">
        <div class="center-content">
          <div class="center-title">服务入口</div>
          <div class="center-nav"></div>
          <div class="center-bottom">
            <div class="bottom-content" @click="goToUrl('manbing')">
              <img src="./img/manbing.png" alt="">
              <div class="img-title">慢病筛查随访系统</div>
            </div>
            <div class="bottom-content" style="padding-top: 20px;" @click="goToUrl('wuda')">
              <img src="./img/wuda.png" alt="">
              <div class="img-title">五大中心急救系统</div>
            </div>
            <div class="bottom-content" style="padding-top: 20px;" @click="goToUrl('zhuanbing')">
              <img src="./img/zhuanbing.png" alt="">
              <div class="img-title">专病管理平台</div>
            </div>
          </div>
        </div>
      </div>
      <div class="page-bottom">
        <span class="bottom-title">技术支持：心智医联（北京）科技有限公司</span>
      </div>
    </div>
  </body>
  <script type="text/javascript">
    var vm = new Vue({
      el: "#app",
      data() {
        return {
          integrate: 'https://zmdszxyy.cdhyhs.com/'
        }
      },
      methods: {
        goToUrl(type) {
          if (type == 'manbing') {
            window.location.href = this.integrate + 'chronic'
          } else if (type == 'wuda') {
            window.location.href = this.integrate + 'dist'
          } else if (type == 'zhuanbing') {
            this.$message({
              message: '功能正在建设中...'
            })
          }
        }
      }
    })
  </script>
</html>